<template>
  <vue-modal
    @submitData="saveUser"
    modalTitle="保存用户信息"
    modalName="saveUserModal"
    modalWidth="750"
    ref="saveUserModal">
    <div slot="content" class="form-box">
      <el-form ref="form" :model="form" label-width="80px">
        <div class="message-box">
          <h3 class="name-title">用户名</h3>
          <span :class="showUsernameTip? 'tip show-tip': 'tip'">长度不超过8个字符</span>
          <p class="username-star">*</p>
        </div>
        <el-input
          v-model="form.username"
          class="input-username"
          maxlength="8"
          @focus="focusInputUsername"
          @blur="blurInputUsername"></el-input>
        <div class="message-box">
          <h3 class="name-title">昵称</h3>
          <span :class="showNicknameTip? 'tip show-tip': 'tip'">长度不超过8个字符</span>
        </div>
        <el-input
          v-model="form.nickname"
          class="input-nickname"
          maxlength="8"
          @focus="focusInputNickname"
          @blur="blurInputNickname"></el-input>
        <div class="message-box">
          <h3 class="name-title">手机号码</h3>
          <span :class="showMobileTip? 'tip show-tip': 'tip'">请输入手机号码</span>
          <p class="mobile-star">*</p>
        </div>
        <el-input
          v-model="form.mobile"
          class="input-mobile"
          @focus="focusInputMobile"
          @blur="blurInputMobile"></el-input>
        <div class="message-box">
          <h3 class="name-title">角色</h3>
          <p class="role-star">*</p>
        </div>
        <el-select v-model="form.roleId" class="select-role" placeholder="请选择角色">
          <el-option
            v-for="item in roleData"
            :key="item.id"
            :label="item.roleName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form>
    </div>
  </vue-modal>
</template>

<script>

  import vueModal from 'components/common/modal/VueModal';

  import {getAllRoles} from "../../../network/viewsRequest/role";
  import {insertUser, updateUser} from "../../../network/viewsRequest/user";

  export default {
    name: "SaveUserTemplate",
    components: {
      vueModal
    },
    data() {
      return {
        form: {
          id: null,
          username: '',
          nickname: '',
          mobile: '',
          roleId: null,
        },
        roleData: [],
        showUsernameTip: false,
        showNicknameTip: false,
        showMobileTip: false,
      }
    },
    props: {
      userDataFromParent: {
        type: Object,
        default: function () {
          return {};
        }
      }
    },
    methods: {
      /**
       * 打开模态框
       */
      show() {
        // this.form = {};
        this.showUsernameTip = false;
        this.showNicknameTip = false;
        this.showMobileTip = false;
        this.$refs.saveUserModal.show('saveUserModal');
      },
      /**
       * 关闭模态框
       */
      close() {
        this.$refs.saveUserModal.closeModal();
      },
      /**
       * 当用户名相关的输入框获取焦点时调用的方法，将对应的提示显示出来
       */
      focusInputUsername() {
        this.showUsernameTip = true;
      },
      /**
       * 当用户名相关的失去框获取焦点时调用的方法，将对应的提示隐藏起来
       */
      blurInputUsername() {
        this.showUsernameTip = false;
      },
      /**
       * 当昵称相关的输入框获取焦点时调用的方法，将对应的提示显示出来
       */
      focusInputNickname() {
        this.showNicknameTip = true;
      },
      /**
       * 当昵称相关的输入框失去焦点时调用的方法，将对应的提示隐藏起来
       */
      blurInputNickname() {
        this.showNicknameTip = false;
      },
      /**
       * 当手机号码相关的输入框获取焦点时调用的方法，将对应的提示显示出来
       */
      focusInputMobile() {
        this.showMobileTip = true;
      },
      /**
       * 当手机号码相关的输入框失去焦点时调用的方法，将对应的提示隐藏起来
       */
      blurInputMobile() {
        this.showMobileTip = false;
      },
      saveUser() {
        // 1.检查输入的内容
        let result = this.checkInput();
        if (!result) {
          return;
        }
        // 2.选择方法
        let func = null;
        if (this.form.id) {
          func = updateUser;
        } else {
          func = insertUser;
        }
        // 3.进行操作
        this.$confirm("是否确定要保存？", "警告", {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: "warning"
        }).then(() => {
          func(this.form).then(res => {
            if (res.code == 1) {
              this.$message.success("保存成功");
              // 关闭模态框
              this.close();
              // 刷新表格
              this.$emit("reloadTable");
            } else {
              this.$message.error(res.message);
            }
          })
        }).catch(() => {
          this.$message.info("保存操作已经被取消");
        })

      },
      /**
       * 对输入内容进行校验
       */
      checkInput() {

        if (!this.form.username) {
          this.$message.error("用户名不能为空");
          return false;
        }
        if (this.form.username.length > 8) {
          this.$message.error("用户名长度不能超过8个字符");
          return false;
        }

        if (this.form.nickname && this.form.nickname.length > 8) {
          this.$message.error("昵称长度不能超过8个字符");
          return false;
        }

        if (!this.form.mobile) {
          this.$message.error("手机号码不能为空");
          return false;
        }
        if (!this.isPhoneAvailable(this.form.mobile)) {
          this.$message.error("手机号码校验失败");
          return false;
        }
        if (!this.form.roleId) {
          this.$message.error("请选择用户的角色");
          return false;
        }
        return true;
      },
      /**
       * 判断是否是手机号
       */
      isPhoneAvailable: function (phone) {
        let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!reg.test(phone)) {
          return false;
        } else {
          return true;
        }
      },
      /**
       * 获取所有的角色信息
       */
      getAllRoles() {
        getAllRoles().then(res => {
          if (res.code == 1) {
            this.roleData = res.data;
          } else {
            this.roleData = [];
          }
        });
      },
      assignFormFromParent(user) {
        this.form.id = user.id;
        this.form.username = this.$set(this.form, "username", user.username);
        this.form.nickname = this.$set(this.form, "nickname", user.nickname);
        this.form.mobile = this.$set(this.form, "mobile", user.mobile);
        this.form.roleId = this.$set(this.form, "roleId", user.roleId);
      }
    },
    watch: {
      userDataFromParent: {
        deep: true,
        handler(val) {
          // 回显信息
          this.assignFormFromParent(val);
        }
      }
    },
    mounted() {
      this.getAllRoles();
    }
  }
</script>

<style scoped>
  .form-box {
    padding-left: 100px;
    position: relative;
  }
  .form-box p {
    position: absolute;

    color: #F56C6C;
  }

  .username-star {
    top: 0px;
    left: 158px;
  }
  .mobile-star {
    top: 182px;
    left: 178px;
  }
  .role-star {
    top: 272px;
    left: 138px;
  }

  .input-username,.input-nickname,.input-mobile {
    width: 500px;
    margin-bottom: 20px;
  }
  h3 {
    display: inline-block;
    margin-bottom: 10px;
  }
  .tip {
    margin-left: 20px;
    color: #F56C6C;
    visibility: hidden;
  }
  .show-tip {
    visibility: visible !important;
  }
</style>